<template>
  <view class="page-header" :style="`padding-top:${pagePaddingTop}rpx`">
    <image class="avatar" :src="avatarUrl" />
    {{ date }}, {{ userName }}
  </view>
</template>
<script lang="ts">
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
      pagePaddingTop: 44
    };
  },
  methods: {
    getSafeArea() {
      Taro.getSystemInfo().then(info => {
        this.statusBarHeight = info.statusBarHeight;
      });

      const { statusBarHeight } = Taro.getSystemInfoSync();
      const menuButtonObject = Taro.getMenuButtonBoundingClientRect();
      const { top, height } = menuButtonObject;
      const navBarHeight = height / 2 + (top - statusBarHeight) * 2;
      this.pagePaddingTop = (statusBarHeight + navBarHeight - 14) * 2;
    }
  },
  computed: {
    date(): string {
      return new Date().getHours() >= 12 ? "下午好" : "上午好";
    },
    userName(): string {
      return this.$store.state.user.userInfo.nickName;
    },
    avatarUrl(): string {
      return this.$store.state.user.userInfo.avatarUrl;
    }
  },
  mounted() {
    this.getSafeArea();
  }
};
</script>
<style lang="less">
.page-header {
  display: flex;
  align-items: flex-end;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  margin-right: 10rpx;
}
</style>
